<template>
  <div class="gl">
    <div class="gl-title-group">
      <img class="gl-title-icon" src="https://imgs.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png" alt="猜你喜欢">
      <span class="gl-title">猜你喜欢</span>
    </div>
    <ul class="gl-like-list">
      <router-link  :to="'/detail/' + item.id"
                    tag="li"
                    class="gl-like-item"
                    v-for="item of list"
                    :key="item.id">
        <img class="gl-like-img" :src=item.img>
        <div class="gl-like-info">
          <div class="gl-like-title">{{item.title}}</div>
          <div class="gl-like-comment">{{item.comment_num}}</div>
          <div class="gl-like-price">
            <div class="gl-like-price-num">¥{{item.price}}</div>
            <span>起</span>
          </div>
        </div>
      </router-link>
    </ul>
    <a class="gl-like-more" href="#">查看所有产品</a>
  </div>
</template>

<script>
export default {
  name: 'HomeGuess',
  props: {
    list: Array
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.gl
  padding-left: .2rem
  margin-top: .2rem
  background: #fff
  .gl-title-group
    height: 1rem
    line-height: 1rem
    .gl-title-icon
      height: .3rem
      width: .3rem
      padding-bottom: .1rem
      padding-right: .1rem
    .gl-title
      font-size: $recTilte
  .gl-like-item
    display: flex
    position: relative
    padding: .1rem 0 .2rem 0
    &:after {
      position: absolute
      content:''
      background-color: $bodybgColor
      top: 2.25rem
      width: 10rem
      height: .02rem
    }
    .gl-like-img
      height: 2rem
      width: 2rem
    .gl-like-info
      padding-left: .2rem
    .gl-like-title
      font-size: $recTilte
      margin-top: .3rem
    .gl-like-comment
      margin-top: .3rem
    .gl-like-price
      display: flex
      margin-top: .35rem
      height: .3rem
      .gl-like-price-num
        color: #ff8300
        font-size: .4rem
        line-height: .2rem
        padding-right: .1rem
  .gl-like-more
    display: block
    height: 1rem
    line-height: 1rem
    font-size: $recTilte
    color: $bgColor
    text-align: center
</style>
